<template>
    <!-- hky 2023年3月20日 19点15分 -->
    <!-- 数据显示 -->
  <div id="dataDisplay">
    <el-card class="box-card">
      <!-- 图表 -->
        <div v-for="(item,i) in chartList" :key="i">
          <div :id="`chart_${i}`" style="width: 580px;height:400px; float: left;"></div>
        </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'dataDisplay',
  data () {
    return {
      chartList: [],
      // 添加还是显示 1添加 0显示
      type: '0'
    }
  },
  // 初始化加载数据
  mounted () {
    this.getChartList()
  },
  methods: {
    getChartList () {
      this.$axios.post('/HomePage/getChartList'
      ).then(res => {
        this.chartList = res.data.obj
        this.$nextTick(() => {
          this.loadCharts()
        })
      }).catch(err => {
        console.log(err)
      })
    },
    loadCharts () {
      const V = this
      V.chartList.forEach((item, i) => {
        V.handleCommand(`chart_${i}`, item.chartType, item.chartSql)
      })
    },
    // 图标类型下拉框
    handleCommand (divID, chartType, chartSql) {
      // 判断下拉框选中的图标类型
      if (chartType === 'pieChart') {
        // 饼状图
        this.pieChart(divID, chartSql)
      } else if (chartType === 'barChart') {
        // 柱状图
        this.barChart(divID, chartType, chartSql)
      } else if (chartType === 'lineChart') {
        // 折线图
        this.lineChart(divID, chartType, chartSql)
      } else if (chartType === 'funnelChart') {
        // 漏斗图
        this.funnelChart(divID, chartSql)
      }
    },
    // 折现图
    lineChart (divID, chartType, chartSql) {
      this.$axios.get('/HomePage/getBarChart/' + chartSql + '/' + chartType + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          myChart.setOption({
            xAxis: {
              data: res.data.obj.xAxis
            },
            series: [{
              // 根据名字对应到相应的系列
              name: '销量',
              data: res.data.obj.series
            }]
          })
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
      const option = {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      }
      const myChart = echarts.init(document.getElementById(divID))// 图标初始化
      myChart.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    // 柱状图
    barChart (divID, chartType, chartSql) {
      this.$axios.get('/HomePage/getBarChart/' + chartSql + '/' + chartType + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          myChart.setOption({
            xAxis: {
              data: res.data.obj.xAxis
            },
            series: [{
              // 根据名字对应到相应的系列
              name: '销量',
              data: res.data.obj.series
            }]
          })
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
      const option = {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      const myChart = echarts.init(document.getElementById(divID))// 图标初始化
      myChart.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    // 饼状图
    pieChart (divID, chartSql) {
      const option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const myChart = echarts.init(document.getElementById(divID))// 图标初始化
      myChart.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      this.$axios.get('/HomePage/getPieChart/' + chartSql + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          myChart.setOption({
            series: [{
              data: res.data.obj
            }]
          })
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 漏斗图
    funnelChart (divID, chartSql) {
      const option = {
        title: {
          text: 'Funnel'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: []
        },
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: []
          }
        ]
      }
      const myChart = echarts.init(document.getElementById(divID))// 图标初始化
      myChart.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      this.$axios.get('/HomePage/getFunnelChart/' + chartSql + '/' + this.type
      ).then(res => {
        if (res.data.flag) {
          myChart.setOption({
            legend: {
              data: [res.data.obj.legend]
            },
            series: [{
              data: res.data.obj.series
            }]
          })
        } else {
          this.myMessage('error', res.data.obj)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
    .btnFalses{
            background: #C90003 !important;
            color: #fff !important;
            border-color:#C90003 !important;
    }
</style>
<style scoped>
.el-icon-arrow-down {
    font-size: 12px;
}
.box-card {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
</style>
